<template>
  <!--
   <el-table  element-ui给我们提供的表格组件
   :data  绑定模型层的数据
   border 边框
   stripe  斑马条纹
  -->
  <div>
    <el-form :model="userSearchForm"  ref="userAddForm" :inline="true" >
      <input type="text" placeholder="请输入名字" align="left"/>
      <input type="text" placeholder="请输入地址" align="lfet"/>

      <el-button type="success" @click="selectone">搜索</el-button>
    </el-form>
    <!--由于Element-ui规定只能有一个el根节点,所以要用div盒子包起来-->
  <el-table
    :data="tableData"
    border
    stripe
    style="width: 100%">
    <!--
      <el-table-column 一列
      prop="date" 绑定模型层tableData中对象的属性
      label   列头
      width  列宽  保留一列不要写宽度，让它撑满窗口
    -->
    <el-table-column
      prop="id"
      label="编号"
      width="60">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="150">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱地址">
    </el-table-column>
    <el-table-column
      prop="address"
      label="家庭住址">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="出生日期">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="160">
      <template slot-scope="scope">
        <el-button @click="revise(scope.row)" type="success" size="small">修改</el-button>
        <el-button @click="cutoff(scope.row)" type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    align="right"
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="queryParam.pageSize"
    @current-change="currentChange">
  </el-pagination>
</div>
</template>

<script>
//模型层
export default {
  name: 'Bumen',
  data() {// 组件内部取值
    return {
      //进入页面，初始化数据为空
      tableData: [],
      queryParam: {//当前页面的数据集合对象(分页和高级查询)
        currentPage: 1,
        pageSize: 10//默认当前页和显示的条数
      },
      total: 0//分页总条数
    }
  },
  methods: {
    //自己定义一个改变查询条件的方法
    currentChange(currentPage) {
      this.queryParam.currentPage = currentPage;
      this.getBumens();
    },
    cutoff(row) {
      //创建给被删除的数据用来赋值的对象
      let cutid=this;
      this.$confirm('确认要删除吗?',{type:'success'})
      .then(()=>{
/*模拟删除的逻辑*/
        let userid=row.id;
        //模拟删除接口的地址,请求方式为get
        cutid.$http.get("/bumen/delete",{"id":userid})
        .then(res=>{
          console.log(res);
/*         可以拿到id和对应的数据
          Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: {…} }*/
            if(res.data.success){
              this.$message({
                showClose:true,message:'删除成功!!!',
                type:'success',offset:200});
                cutid.currentChange();
            }else{
              this.$message({
                showClose:true,message:'删除失败!!! 错误信息是'+res.data.message(),
                type:'error',offset:200});
            }
          })
          .catch(error=>{
          cutid.$message({
            showClose:true,message:'删除失败!!! 错误信息是'+error.msg,
            type:'error',offset:200});
        })
      });
    },//获取列表数据方法封装数据
    getBumens() {
      this.$http.post("/bumen/list", this.queryParam)
        .then(result => {//调用后端成功后之后的返回
          //调用后端如果成功的返回结果,集合为result
          result = result.data;// PageList,让模型层表格拿到数据
          this.tableData = result.rows;
          this.total = result.total;//给分页总条数赋值
        })
        .catch(result => {//调用不通后端
          this.$message({
            type: 'error',
            message: "系统繁忙，稍后重试！！"
          });
        })
      },
    selectone() {
      this.$http.post("/bumen/list", this.queryParam)
        .then(result => {//调用后端成功后之后的返回
          result = result.data;// PageList
          this.tableData = result.rows;
          this.total = result.total;
        })
        .catch(result => {//调用不通后端
          this.$message({
            type: 'error',
            message: "系统繁忙，稍后重试！！"
          });
        })
    }
  },
  mounted() {//钩子函数,当前页面加载完毕后,调用列表展示的方法
    this.getBumens();
  }
}
</script>
<style scoped>
</style>
